<template>
  <div v-loading="loading">
    <el-button
      v-if="
        moduleNameOptions &&
          activePageForm &&
          activePageForm.activeModuleIndex != null &&
          (!moduleNameOptions[
            activePageForm.modules[activePageForm.activeModuleIndex].type
          ].maxSize ||
            shelfList.length <
            moduleNameOptions[
              activePageForm.modules[activePageForm.activeModuleIndex].type
            ].maxSize)
      "
      type="primary"
      size="small"
      round
      @click="addShelf"
    >新增内容
    </el-button>
    <!-- 未配置数据相关内容 -->
    <div
      v-if="
        activePageForm.modules[activePageForm.activeModuleIndex].modules
          .length === 0
      "
      class="empty-tips"
    >
      未配置数据
    </div>

    <!-- 站内链接 -->
    <!-- <template v-else> -->
    <template>
      <ul class="shelf-list-container">
        <draggable
          :list="shelfList"
          :options="{ filter: '.undrag' }"
          @sort="shelfsDragSort"
        >
          <li
            v-for="(item, index) in shelfList"
            :key="item.id"
            class="shelf-container"
          >
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <div class="flexRBC">
                  <div>
                    <span
                      v-if="item.title"
                      style="fontweight: bold; line-height: 32px"
                    >
                      {{ index + 1 }}.&nbsp;&nbsp;{{ item.title }}</span>
                    <div v-else-if="item.bg" class="flexRSC">
                      <span style="fontweight: bold; line-height: 32px">
                        {{ index + 1 }}.&nbsp;&nbsp;</span>
                      <el-image :src="fileBaseUrl + item.bg" class="title-bg" />
                    </div>
                    <span v-else style="fontweight: bold; line-height: 32px">
                      {{ index + 1 }}.
                    </span>
                  </div>
                  <div>
                    <el-button
                      size="small"
                      type="primary"
                      round
                      @click="editShelf(item, index)"
                    >编辑</el-button>
                    <el-button
                      size="small"
                      type="danger"
                      round
                      @click="delShelf(item, index)"
                    >删除</el-button>
                    <el-button
                      v-if="shelfList.length > 1"
                      icon="el-icon-sort"
                      size="small"
                      round
                    >拖拽排序</el-button>
                  </div>
                </div>
              </div>
              <ul
                v-if="(item.type == 0 && item.goodsList) || item.itemList"
                ref="shelfGoodsList "
                class="goods-list"
              >
                <draggable
                  :list="
                    businessTypes == 'MALL' ? item.goodsList : item.itemList
                  "
                  :options="{ filter: '.undrag' }"
                  @sort="goodsDragSort(item)"
                >
                  <li
                    v-for="(subItem, subIndex) in businessTypes == 'MALL'
                      ? item.goodsList
                      : item.itemList"
                    :key="subIndex"
                    class="cell-item flexRBC"
                  >
                    <div class="flexRSC">
                      <img
                        v-if="subItem.coverImg"
                        :src="fileBaseUrl + subItem.coverImg"
                        class="cover-img"
                      >
                      <div>
                        <div class="goods-name">{{ subItem.title }}</div>
                        <!-- <div>{{ subItem.category.join(" > ") }}</div> -->
                      </div>
                    </div>
                    <div>
                      <el-button
                        v-if="item.goodsList && item.goodsList.length > 1"
                        size="mini"
                        round
                      >拖拽排序</el-button>
                      <el-button
                        v-if="item.itemList && item.itemList.length > 1"
                        size="mini"
                        round
                      >拖拽排序</el-button>
                    </div>
                  </li>
                </draggable>
              </ul>
              <!-- <ul  ref="shelfGoodsList " class="goods-list">
                <draggable :list="item.goodsList" :options="{ filter: '.undrag' }" @sort="goodsDragSort(item)">
                  <li v-for="(subItem, subIndex) in item.itemList" :key="subIndex" class="cell-item flexRBC">
                    <div class="flexRSC">
                      <img v-if="subItem.coverImg" :src="fileBaseUrl + subItem.coverImg" class="cover-img">
                      <div>
                        <div class="goods-name">{{ subItem.title }}</div>
                        <div>{{ subItem. }}</div>
                      </div>
                    </div>
                    <div>
                      <el-button v-if="item.itemList.length > 1" size="mini" round>拖拽排序
                      </el-button>
                    </div>
                  </li>
                </draggable>
              </ul> -->
              <ul
                v-if="item.type == 1 && item.categoryList"
                class="category-list"
              >
                <li
                  v-for="subItem in item.categoryList"
                  :key="subItem.id"
                  class="cell-item"
                >
                  {{ subItem.names.join(" > ") }}
                </li>
              </ul>
            </el-card>
          </li>
        </draggable>
      </ul>
    </template>

    <!-- 组件 -->
    <!--    <DialogGoods ref="dialogGoods"/>-->
    <DialogShelf ref="dialogShelf" />
  </div>
</template>

<script>
// import DialogGoods from './DialogGoods'
import DialogShelf from './DialogShelf'
import wxaBuildConfig from '@/views/wxaBuildModule/config'
import {
  saveShelf,
  getShelfList,
  getOrderShelfList,
  saveOrderShelf
} from '@/views/wxaMallModule/api/shelf'
import { mapGetters } from 'vuex'
import draggable from 'vuedraggable'

export default {
  components: {
    // DialogGoods,
    DialogShelf,
    draggable
  },

  data() {
    return {
      // 配置
      // 状态
      loading: false,
      moduleNameOptions: null,
      // 数据
      classifyCode: 'DEFAULT',
      shelfIds: [],
      shelfList: [],
      businessType: ''
    }
  },
  watch: {
    'activePageForm.activeModuleIndex'() {
      this.fetchData()
    },
    businessTypes(val) {
      this.shelfList = []
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl', 'activePageForm', 'businessTypes'])
  },
  created() {},
  mounted() {
    this.moduleNameOptions = wxaBuildConfig[this.classifyCode].moduleName
    // this.setbusinessType();
    this.fetchData()
  },
  methods: {
    /**
     * 数据组
     */
    // 获取所有shelfIds
    fetchData() {
      this.shelfIds = []
      this.shelfList = []
      const modules =
        this.activePageForm.modules[this.activePageForm.activeModuleIndex]
          .modules
      modules.forEach((v) => {
        if (v.biz && v.biz.params && v.biz.params.shelfId) {
          this.shelfIds.push(v.biz.params.shelfId)
        }
      })
      if (this.shelfIds.length) {
        this.getShelf()
      }
    },

    // 获取货架
    getShelf() {
      // this.loading = true
      getOrderShelfList(this.shelfIds).then((res) => {
        const modules =
            this.activePageForm.modules[this.activePageForm.activeModuleIndex]
              .modules
        const shelfList = res.data
        shelfList.forEach((v) => {
          modules.some((moduleItem) => {
            if (v.shelfId === moduleItem.biz.params.shelfId) {
              v.title = moduleItem.title
              v.bg = moduleItem.bg
              v.subTitle = moduleItem.subTitle
              return true
            }
          })
        })
        this.shelfList = shelfList
      })
    },

    /**
     * 按钮组
     */
    // 新增
    addShelf() {
      this.$refs.dialogShelf.open({ mode: 'add' }).then((res) => {
        this.activePageForm.modules[
          this.activePageForm.activeModuleIndex
        ].modules.push({
          bg: res.bg,
          biz: {
            params: { shelfId: res.shelfId },
            type: 'MALL_SHELF'
          },
          color: '',
          content: '',
          dump: {
            appId: '',
            feature: '',
            featureParams: '',
            insidePage: '',
            insideParams: '',
            path: '',
            type: '',
            url: ''
          },
          modules: [],
          pic: '',
          ranking: 0,
          style: '',
          subTitle: res.subTitle,
          subType: '',
          title: res.title,
          type: this.activePageForm.modules[
            this.activePageForm.activeModuleIndex
          ].type
        })
        this.fetchData()
      })
    },

    // 编辑货架
    editShelf(row, index) {
      // let { title, subTitle, bg } = this.activePageForm.modules[
      //   this.activePageForm.activeModuleIndex
      // ].modules[index];
      // row.title = title;
      // row.subTitle = subTitle;
      // row.bg = bg;
      this.$refs.dialogShelf.open({ mode: 'edit', row }).then((res) => {
        this.activePageForm.modules[
          this.activePageForm.activeModuleIndex
        ].modules[index].title = res.title
        this.activePageForm.modules[
          this.activePageForm.activeModuleIndex
        ].modules[index].subTitle = res.subTitle
        this.activePageForm.modules[
          this.activePageForm.activeModuleIndex
        ].modules[index].bg = res.bg
        this.getShelf()
      })
    },

    // 删除货架
    delShelf(item, index) {
      this.activePageForm.modules[
        this.activePageForm.activeModuleIndex
      ].modules.splice(index, 1)
      this.shelfIds.splice(index, 1)
      this.shelfList.splice(index, 1)
    },

    // 货架拖拽结束
    shelfsDragSort(val) {
      const newShelfIds = []
      const modules =
        this.activePageForm.modules[this.activePageForm.activeModuleIndex]
          .modules
      const newModules = []
      this.shelfList.forEach((v) => {
        newShelfIds.push(v.shelfId)
        modules.some((moduleItem) => {
          if (v.shelfId === moduleItem.biz.params.shelfId) {
            newModules.push(moduleItem)
            return true
          }
        })
      })
      this.shelfIds = newShelfIds
      this.activePageForm.modules[
        this.activePageForm.activeModuleIndex
      ].modules = newModules
    },

    // 商品拖拽结束
    goodsDragSort(val) {
      this.loading = true
      if (this.businessTypes == 'MAll') {
        saveShelf(val)
          .then((res) => {})
          .catch((err) => {})
          .finally(() => {
            this.loading = false
          })
      } else {
        saveOrderShelf(val)
          .then((res) => {})
          .catch((err) => {})
          .finally(() => {
            this.loading = false
          })
      }
    }
    //  setbusinessType() {
    //   let { businessType } =this.activePageForm.modules[this.activePageForm.activeModuleIndex];
    //   this.businessType = businessType;
    //   console.log('被刷新了');
    // },

    /**
     * 状态组
     */

    /**
     * 方法组
     */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* 覆盖样式 */
::v-deep {
  .el-card__body {
    padding: 10px 20px;
  }

  .el-card__header {
    padding: 10px 20px;
  }
}

/* 无数据 */
.empty-tips {
  margin-top: 100px;
  text-align: center;
  color: #909399;
  font-size: 14px;
}

/* 货架 */
.shelf-container {
  margin-top: 10px;
  cursor: move;

  .title-bg {
    width: 188px;
    height: 33px;
  }

  /* 商品列表 */
  .goods-list {
    // display: flex;
    font-size: 14px;
    color: #606266;

    .cell-item {
      margin-bottom: 10px;

      .cover-img {
        display: block;
        width: 60px;
        height: 60px;
        margin-right: 10px;
      }

      .goods-name {
        margin-bottom: 5px;
        color: #303030;
      }
    }
  }

  /*  类目列表 */
  .category-list {
    color: #606266;
    font-size: 14px;

    .cell-item:not(:first-child) {
      margin-top: 10px;
    }
  }
}

/* 排序 */
.el-icon-rank {
  cursor: pointer;
  font-size: 20px;
  margin-right: 10px;
}
</style>
